# Component: Tag Label

Atomic text and icon handler for taxonomy items

Utility Atom

### BEM Anatomy

| Type      | Class Name      | Description                                                                             |
| --------- | --------------- | --------------------------------------------------------------------------------------- |
| ==Block== | `.as-tag-label` | The base block (logical). Note: Often applied as a parent namespace for its elements.   |
| Element   | `__icon`        | The glyph element. Manages right-hand spacing to separate the icon from the label text. |
| Element   | `__text`        | The actual tag name string. Supports custom labeling classes via `@LabelClass`.         |

### Visual Integration

The `Tag Label` is designed to be highly composable. It allows for conditional icon rendering (`ShowIcon`) and accepts dynamic FontAwesome classes. Its simplicity ensures it can be injected into buttons, headings, or list items without breaking existing text flows.

##### Generated HTML

```html
<!-- Label with Icon -->
<span class="as-tag-label">
    <i class="as-tag-label__icon fa-solid fa-tag"></i>
    <span class="as-tag-label__text">News</span>
</span>

<!-- Text Only -->
<span class="as-tag-label">
    <span class="as-tag-label__text">Announcements</span>
</span>
```

##### SCSS

```scss
.as-tag-label {
  &__icon {
    // Standardized gutter between 
    // icon and following text
    margin-right: 0.25rem;
  }
}
```
